<template>
  <div class="invest-box">
    <div class="residue-box">
      <p class="residue-title">当前帐户余额（元）</p>
      <p class="residue-res">{{this.ymoney}}</p>
    </div>

    <div class="box-2">
      <div class="title-box">
        <p>充值金额</p>
      </div>
      <mu-row gutter>
        <mu-col
          span="4"
          v-for="(item,index) in moneyList"
          :key="index"
          :class="{ checkprot:index==money}"
          @click="checkmoney(index,item.value)"
        >
          <div class="grid-cell">
            {{item.title}}
            <input
              type="radio"
              name="money-id"
              :checked="index==money"
              :value="item.id"
            />
          </div>
        </mu-col>
      </mu-row>

      <mu-row gutter>
        <mu-col span="12">
          <mu-form
            :model="form"
            class="mu-demo-form"
            :label-position="labelPosition"
            label-width="100"
          >
            <mu-form-item prop="input" label aria-placeholder>
              <input
                maxlength="5"
                min="5"
                v-model="form.money"
                placeholder="自定义充值金额"
                class="my-input"
                @click="customize"
              />
            </mu-form-item>
          </mu-form>
        </mu-col>
      </mu-row>
      <div></div>
      <mu-button class="btn invest-btn" @click="success(callback)">立即充值</mu-button>
    </div>
    <div class="gift-box" v-show="show">
      <div class="fleft">
        <p class="gift-icon-box">
          <span class="iconfont icon-icon-test"></span>
        </p>
        <span class="gift-msg">冲{{gift.total}}送{{gift.gift}}</span>
      </div>
      <div class="fright">
        <p class="gift">¥{{gift.gift}}</p>
        <p class="total">满{{gift.total}}元可用</p>
      </div>
    </div>
  </div>
</template>

<script>

import { Toast } from "vant";
import "vant/lib/toast/style/index";
export default {
  data() {
    return {
      ymoney: 0,
      money: 0,
      show: false,
      moneyList: [
        { id: 0, title: "自定义", value: 0 },
        { id: 1, title: "10", value: 10 },
        { id: 2, title: "20", value: 20 },
        { id: 3, title: "50", value: 50 },
        { id: 4, title: "100", value: 100 },
        { id: 5, title: "200", value: 200 },
        { id: 6, title: "500", value: 500 }
      ],
      giftlist: [],
      gift: {
        gift: 0,
        total: 0
      },
      labelPosition: "top",
      form: {
        money: ""
      }
    };
  },
  mounted() {
    this.$api.queryAccountBalance().then(res => {
      this.ymoney = res.data.result.accountAmount;
    });
  },
  methods: {
    callback() {
      Toast("充值成功");
      this.$router.push("/vacancy");
    },
    success(fn) {

      if(this.form.money==''){
         Toast("请选择充值金额");
         return
      }

      if(this.form.money<5 ){
         Toast("充值金额须大于5元");
         return
      }
      this.$api.recharge(this.form.money).then(res => {

        if (res.data.code == 0) {
        wx.chooseWXPay({
          timestamp: res.data.result.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: res.data.result.nonceStr, // 支付签名随机串，不长于 32 位
          package: res.data.result.packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: res.data.result.sign, // 支付签名
          success: function(res) {

          fn()
          }
        });
         }else{
            Toast(res.data.msg);
         }
      });

    },
    checkmoney(index, value) {
      this.money = index;
      this.form.money = value;
      this.$api.promotionInfo(value).then(res => {
        if (res.data.code == 0) {
          this.gift.gift = res.data.result.giftAmount;
          this.gift.total = res.data.result.totalAmount;
          this.show = true;
        } else {
          this.show = false;
        }
      });
    },
    customize() {
      this.money = 0;
    }
  },
  created() {}
};
</script>

<style>
</style>
